<template>
  <div class="seize">
    <Head>
      <template #title>
        <div class="txt_time">
          <div class="txt">
            {{ (type == 1 && "限时秒杀") || (type == 2 && "限时抢购") }}
          </div>
          <div class="time_txt">
            距{{ (type == 1 && "开始") || (type == 2 && "结束") }}：
          </div>
          <div class="time">
            <div class="num" v-if="date.day > 0">{{ date.day }}</div>
            <div class="symbol" v-if="date.day > 0">天</div>
            <div class="num">{{ date.hour }}</div>
            <div class="symbol">:</div>
            <div class="num">{{ date.minute }}</div>
            <div class="symbol">:</div>
            <div class="num">{{ date.second }}</div>
          </div>
        </div>
      </template>
    </Head>
    <van-row :gutter="fontSize * 0.36">
      <van-col span="12" v-for="(s, i) in 2" :key="i">
        <Seize :s="s.product" :price="s.seckillPrice"></Seize>
      </van-col>
      <!-- <van-col span="12" v-if="(dash.list || []).length % 2 != 0"></van-col> -->
    </van-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getTime } from "@/utils/index";
import moment from "moment";

export default {
  props: {
    id: Number,
    dash: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      time: 0,
      type: 1,
      date: {},
      interval: null,
    };
  },
  computed: {
    ...mapState(["fontSize"]),
  },
  created() {
    this.initData();
  },
  methods: {
    /**
     * 初始化数据
     */
    async initData() {
      let startTime = moment(this.dash.startTime).unix();
      let endTime = moment(this.dash.endTime).unix();
      let today = moment(this.dash.currentTime).unix();
      if (today < startTime) {
        this.type = 1;
        this.time = Number(startTime) - Number(today);
      } else {
        if (today < endTime) {
          this.type = 2;
          this.time = Number(endTime) - Number(today);
        }
      }
      if (this.id != 1) {
        this.type = 2;
      }
      this.time = 60 * 1000;
      if (this.time != 0) {
        this.date = getTime(this.time);
        await this.countdown();
      }
    },
    /**
     * 倒计时
     */
    async countdown() {
      this.interval = setInterval(() => {
        this.time--;
        this.date = getTime(this.time);
        if (this.time == 0) {
          clearInterval(this.interval);
          this.interval = null;
        }
      }, 1000);
    },
    /**
     * 去详情页面
     */
    toDetails(id) {
      this.$router.push(`/dashDetails/${id}`);
    },
  },
  unmounted() {
    clearInterval(this.interval);
    this.interval = null;
  },
};
</script>

<style lang='less' scoped>
.seize {
  margin-bottom: 0.6rem;
  padding: 0.64rem 0.48rem;
  background: rgba(255, 255, 255, 1);

  .txt_time {
    .fa(center);

    .txt {
      padding-right: 0.8rem;
      font-size: 0.64rem;
      line-height: 0.84rem;
      font-family: STZhongsong;
      color: rgba(44, 42, 41, 1);
    }

    .time_txt {
      font-size: 0.48rem;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: rgba(44, 42, 41, 1);
    }

    .time {
      font-size: 0.48rem;
      .fa(center);

      .symbol {
        padding: 0 0.16rem;
      }

      .num {
        .size(0.72rem, 0.72rem);
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: rgba(196, 66, 66, 1);
        background: rgba(196, 66, 66, 0.1);
        border-radius: 0.08rem;
        .flex(center, center);
      }
    }
  }
}
</style>
